<template>
  <div class="category">
    <div v-title data-title="分类列表"></div>
    <div class="search-container" @click="goSearch">
        <div class="m-topSearchIpt ipt">
            <i class="icon iconfont icon-search" ></i>
            <span class="placeholder">
                <span>搜索商品</span>
            </span>
        </div>
        
      </div>
      <mt-navbar v-model="selected">
  <mt-tab-item id="1">分类</mt-tab-item>
  <mt-tab-item id="2">品牌</mt-tab-item>
  <mt-tab-item id="3">地区</mt-tab-item>
</mt-navbar>
      <!-- <div class="cate_type">
        <div v-for="(item, index) in goTo">
        <router-link   :to="item.path" :class="{act: index === majorSelected}"  @click="setType(index, item.id)">{{item.name}}</router-link>
        </div>
      </div> -->
<section class="cate_container">
  <!-- <router-view></router-view> -->
  <mt-tab-container v-model="selected" :swipeable="true">
  <mt-tab-container-item id="1">
   <section class="menu_container">
    <section class="menu_left">
      <ul>
        <li class="menu_left_li" :class="{act: index === majorSelected}" v-for="(item, index) in appCategoryFirst" @click="setType(index, item.id)">{{item.appCategoryName}}</li>
      </ul>
    </section>
    <section class="menu_right">
      <dl v-for="(item, index) in appCategorySecond" >
        <dt  @click="showDd(index)" :class="{act: (ddselected == index) }"><div style="float:left;">{{item.appCategoryName}}</div><i class="icon iconfont" :class=" isDisabled ? 'icon-more' : 'icon-moreunfold' " style="float:right;"></i></dt>
        <div >
          <dd  v-for="(item2, index2) in item.categoryModelList" :class="{hid: (ddselected == index) }" ><router-link :to="{path: 'searchList', query: { searchWord: '', categoryId: item2.id }}">{{item2.appCategoryName}}</router-link> </dd>
     </div>
      </dl>
    </section>
  </section>
  <!-- <mt-cell v-for="n in 9" key="n" :title="'测试 ' + n" /> -->
  </mt-tab-container-item>
  <mt-tab-container-item id="2">
   <mt-index-list>
  <mt-index-section index="A">
    <mt-cell title="Aaron"></mt-cell>
    <mt-cell title="Alden"></mt-cell>
    <mt-cell title="Austin"></mt-cell>
  </mt-index-section>
  <mt-index-section index="B">
    <mt-cell title="Baldwin"></mt-cell>
    <mt-cell title="Braden"></mt-cell>
  </mt-index-section>
    <mt-index-section index="C">
    <mt-cell title="Baldwin"></mt-cell>
    <mt-cell title="Braden"></mt-cell>
  </mt-index-section>
    <mt-index-section index="D">
    <mt-cell title="Baldwin"></mt-cell>
    <mt-cell title="Braden"></mt-cell>
  </mt-index-section>
    <mt-index-section index="E">
    <mt-cell title="Baldwin"></mt-cell>
    <mt-cell title="Braden"></mt-cell>
  </mt-index-section>
    <mt-index-section index="F">
    <mt-cell title="Baldwin"></mt-cell>
    <mt-cell title="Braden"></mt-cell>
  </mt-index-section>
    <mt-index-section index="G">
    <mt-cell title="Baldwin"></mt-cell>
    <mt-cell title="Braden"></mt-cell>
  </mt-index-section>
    <mt-index-section index="H">
    <mt-cell title="Baldwin"></mt-cell>
    <mt-cell title="Braden"></mt-cell>
  </mt-index-section>
    <mt-index-section index="I">
    <mt-cell title="Baldwin"></mt-cell>
    <mt-cell title="Braden"></mt-cell>
  </mt-index-section>
    <mt-index-section index="J">
    <mt-cell title="Baldwin"></mt-cell>
    <mt-cell title="Braden"></mt-cell>
  </mt-index-section>
  <mt-index-section index="Z">
    <mt-cell title="Zack"></mt-cell>
    <mt-cell title="Zane"></mt-cell>
  </mt-index-section>
</mt-index-list>
    
  </mt-tab-container-item>
  <mt-tab-container-item id="3">
     <div class="cate-img">
      <img src="../../assets/country-1.jpg"/>
      <img src="../../assets/country-2.jpg"/>
      <img src="../../assets/country-3.jpg"/>
      <img src="../../assets/country-1.jpg"/>
      <img src="../../assets/country-2.jpg"/>
      <img src="../../assets/country-3.jpg"/>
    </div>
    
  </mt-tab-container-item>
</mt-tab-container>
  </section>
</section>
<foot-guide></foot-guide>
  </div>
</template>
<script>
import HeaderBar from '@/components/HeaderBar.vue'
import footGuide from '@/components/footer.vue'
import qs from 'qs'
export default {
  name: 'index',
  components: {
    HeaderBar,
    footGuide
  },
  data () {
    return {
      isDisabled: true,
      ddselected: 0,
      selected: '1',
      majorSelected: 0,
      appCategoryFirst: null,
      appCategorySecond: null,
      id: null,
      goTo: [{
        path: '/category',
        name: '分类'
      }, {
        path: '/category/brands',
        name: '品牌'
      }, {
        path: '/category/area',
        name: '地区'
      }]
    }
  },
  created () {
    this.getCateFirst()
  },
  methods: {
    getCatethree () {

    },
    goSearch () {
      this.$router.push('/search')
    },
    getCateFirst () {
      var self = this
      this.$http.post(this.url + 'api/categoryTreeOne?code=' + this.code).then((res) => {
        this.appCategoryFirst = res.data;
        this.id = res.data[0].id
        this.setType(0, self.id)
        console.log(res.data);
      })
       .catch((err) => {
         console.log(err);
         this.$toast('网络请求超时');
       });
    },
    setType (index, id) {
      this.majorSelected = index
      this.id = id
      this.getCateSecond(id)
    },
    getCateSecond (id) {
      var self = this
      this.loading = true
      this.$http.post(this.url + 'api/categoryTreeTwoAndThree', qs.stringify({
        code: this.code,
        id: id
      })
      )
        .then(function (response) {
          self.appCategorySecond = response.data;
          console.log(response.data);
        })
       .catch(function (error) {
         console.log(error);
         self.$toast('网络请求超时');
       });
    },
    showDd (index) {
      this.ddselected = index;
      this.isDisabled !== this.isDisabled;
    }
  }
}
</script>
<style lang="scss">
.search-container{ z-index: 999;}
.mint-tab-container{width:100%;}
.mint-navbar .mint-tab-item.is-selected{
  color:#e8413b;
  border-bottom-color: #e8413b;
  margin-bottom:0;
}
.mint-tab-container{overflow-y: scroll;}
.mint-navbar{
  position: relative;
  z-index: 111;
  border-bottom:1px solid #aaa;
}
.mint-indexsection-index{
  background: #f2f2f2;
  border-bottom:1px solid #ddd;
}
.mint-cell{ margin-left: .4rem;}
.mint-cell-wrapper{
  border-bottom:1px solid #ddd;
}
.mint-indexlist-nav{ display: none;}
.cate_type{
  height: 2rem;
  border-bottom: 1px solid #eee;
  background: #fff;
  line-height: 2rem;
  z-index: 999;
  position: relative;
  a{
    float: left;
    width: 33%;
    display: block;
    text-align: center;
    &.act{ 
      color: #f00;
      }
  }
}
.cate_container {
  background: #fff;
  display: flex;
  flex: 1;
  padding-bottom: 2rem;
  padding-top: 3.86rem;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  .menu_container {
    display: flex;
    flex: 1;
    overflow-y: hidden;
    position: relative;
    .menu_left {
      width: 3.6rem;
      overflow-y: auto;
      .menu_left_li {
        font-size: .56rem;
        text-align: center;
        height: 1.92rem;
        line-height: 1.92rem;
    border-bottom: 1px solid #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-left: 0.15rem solid #f2f2f2;
    position: relative;
    background: #f2f2f2;
    &.act{ border-left: 0.1rem solid #e64239;
    color: #e64239;
    background-color: #fff;
    }
}
    }
    .menu_right{
      flex: 4;
      height: 100%;
      overflow-y: auto;
      dl{
        margin-left: .8rem;
        overflow: hidden;
         background: #f2f2f2;
dt {
    padding-left: .8rem;
    height: 1.92rem;
    line-height: 1.92rem;
    font-size: .59733rem;
    overflow: hidden;
    position: relative;
     background: #fff;
    
    i{
      color: #333;
      margin-right: .5rem;
      &::before{
        content: "\E6A7";
      }
    }
    &.act{
      i::before{
        content: "\e6a6";
      }
    }
}
 dd {
   font-size: .512rem;
   
   display: none;  
    height: 1.70667rem;
    line-height: 1.70667rem;
    float: left;
    width: 50%;
    padding-left:1.2rem;
    &.hid{ display: block;}
        a{
      color:#747474;
    }
}
      }
      
    }
  }
}
.cate-img{
  padding: .4233rem;
  img{
    margin-bottom: 0.4233rem;
  }
}
</style>

